<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../react/react17.development.js"></script>
    <script src="../react/react-dom17.development.js"></script>
    <script src="../react/babel.min.js"></script>
    <script src="../react/axios.js"></script>
</head>

<body>
    <div id="main"></div>
    <script type="text/babel">
        // 在页面加载时获取com的num赋值给com的time属性
        // 在点击com2button时获取当前时间时间戳重新赋值给com的time属性
        class ComTwo extends React.Component {
            state = { //当前组件对象的 数据储存对象 是当前组件私有的
                num: Date.now(), //num的值为当前时间戳
            }
            render() {
                console.log("com2的 render被调用了");
                return (<div>
                    <button>点击获取当前时间</button>
                </div>)
            }
            componentDidMount() {
                console.log(this.props.run); // 获取传递过来的函数
                this.props.run(this.state.num)
            }
        }
        class Com extends React.Component {
            state = { time: 0 }   //编程模式(常见): 将当前组件所需要的数据都填在state中,在jsx中只用state中的数据渲染,后期更新只需要更改state
            render() {
                return (<div>
                    <h1>这是com组件内容</h1>
                    <p>获取当前时间戳:{this.state.time}</p>
                    {/* 传递给子组件函数时,直接更改函数内的this指向为当前组件对象com 这样传递过去后,在子组件中调用,函数的this也依旧是com */}
                    <ComTwo run={this.test.bind(this)} />
                </div>)
            }
            test(n) {
                console.log("这是test函数", this);
                console.log(n); //在子组件中调用当前函数 传递过来的参数值 是子组件内的私有数据
                this.setState({  //需要当前this指向当前得到com组件对象
                    time: n
                })
            }

        }

        ReactDOM.render(<Com />, document.getElementById("main"));
    </script>
</body>

</html>